iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 32

Day32 網頁前端-持續練習(玩轉同樂)

  • 分享至 

  • xImage
  •  

Day32 玩轉同樂

https://ithelp.ithome.com.tw/upload/images/20201001/20129161cd6qyRFxIY.png
https://ithelp.ithome.com.tw/upload/images/20201001/20129161hN8zne1XOK.png

簡單小語

最近莫名看到這種特效很炫的就會想要寫來練習,又是為元素的應用,當然還有flex的排版,大致上沒太大問題,不過現在對於Body的控制還不是很熟悉,套用height:100%height:100vh呈現出來的樣式就會有所不同,在不寫死高度的前提之下,就先用100vh替代,物件的高度是用padding給推出來的,為的就是可以自適應大小,要開始以好控制好調整為前提的撰寫(咦!?又是自己說哈哈)。

筆記分享

  1. 盡量簡化class的濫用並確認每一個class都是有用的。
  2. 群組式宣告及統一宣告的應用釐清,將不會有大改動及共同的樣式設定在共同的標籤。
  3. flex的應用再熟悉,justify-content,align-items
  4. 共同標籤還可利用:nth-child()去指定選擇,增加靈活性且避免濫用class。
  5. THREE利用時間差,讓文字變化及背景變化的時間有差距。
  6. THREE背景效果是利用border-radius:50% -> border-radius:0的變化,與樣本有差距(仍須努力)。
  7. Fancy利用transform:skewXY()去改變斜度呈現與樣板相同樣式並使用overflow:hiddentransform:translateY()去移動位置且隱藏。
  8. Fancy使用transform:rotate()width,height的搭配,呈現出旋轉並顯現的效果。
  9. Links使用偽元素切割兩半,透過定位的topbottom控制位置並產生移動效果,透過transform:translateY()推移控制位置。
  10. Links的文字故意慢1秒,為了達成讓框框抵達後才出現文字的效果。

持續練習

Practice(200828 Day 32)

樣板來源

Three Fancy Link Hover Effects


2020 iT邦幫忙鐵人賽 Day32 網頁前端-持續練習(玩轉同樂)


上一篇
Day31 網頁前端-持續練習(來杯咖啡)
下一篇
Day33 網頁前端-持續練習(透明人間)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言